<template>
  <view class="forgot-password-page">
    <view class="card-container">
      <!-- 顶部区域 -->
      <view class="header-section">
        <text class="title">忘记密码</text>
        <text class="subtitle">请输入您的注册邮箱，我们将发送重置链接给您。</text>
      </view>

      <!-- 核心表单 -->
      <view class="form-section">
        <view class="input-group">
          <text class="label">电子邮件</text>
          <input class="input" type="email" placeholder="请输入您的注册邮箱" v-model="email" />
		  <text class="label">账户</text>
		  <input class="input" type="text" placeholder="请输入您的注册账户" v-model="name" />
        </view>

        <button class="submit-button" :disabled="loading" @click="zhaohui">
          {{ loading ? '找回中...' : '找回密码' }}
        </button>
      </view>

      <!-- 底部区域 -->
      <view class="footer-section">
        <text class="back-to-login" @click="goToLogin">返回登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';


const email = ref('');
const name = ref('');
const loading = ref(false);



const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login' // 假设登录页面路径为 /pages/login/login
  });
};
const zhaohui = () => {


  loading.value = true;
  uni.request({
      url: 'http://localhost:8080/zhaohui',
  	// method:"POST",
      data: {
        name: name.value
      },
      success: (res) => {
        setTimeout(() => {
          // 修正为实际的响应式数据
          // console.log('登录信息:', { name: username.value, pass: pass.value });
  //用于在指定的延迟时间后执行回调函数。它的作用是模拟网络请求的延迟，增强用户体验。也就是登录时会有时间间隔
          loading.value = false;
        }, 1500);
  	  if(res.data!=null){
  	  uni.showToast({
  	    title: '密码找回成功',
  	    icon: 'none'
  	  });
	  setTimeout(()=>{
alert(res.data)
	  },2000)
  	  }else{
  		uni.showToast({
  		  title: '登录找回失败',
  		  icon: 'none'
  		});
  	}
        
      }
    });
  // 模拟发送请求
  // setTimeout(() => {
  //   console.log('发送重置链接到:', email.value);
  //   uni.showToast({
  //     title: '重置链接已发送 (模拟)',
  //     icon: 'success'
  //   });
  //   loading.value = false;
  //   // 实际应用中，这里会处理发送邮件逻辑
  // }, 1500);
};
</script>

<style scoped>
.forgot-password-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 20rpx;
  box-sizing: border-box;
}

.card-container {
  width: 100%;
  max-width: 600rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.header-section {
  text-align: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: #666666;
  display: block;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 8rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 30rpx;
  color: #333333;
  box-sizing: border-box;
}

.input:focus {
  border-color: #007aff;
  outline: none;
}

.submit-button {
  width: 100%;
  height: 90rpx;
  background-color: #007aff;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.submit-button[disabled] {
  opacity: 0.7;
}

.footer-section {
  text-align: center;
  margin-top: 30rpx;
}

.back-to-login {
  font-size: 28rpx;
  color: #007aff;
  text-decoration: underline;
}
</style>
